<template>
    <div>
        <!-- 注册第二步 -->
        <!-- 顶部导航 -->
        <van-nav-bar left-text="返回" left-arrow @click-left="$router.go(-1)" title="京东注册页" />
        <!-- 表单 -->
        <van-form @submit="onSubmit">

            <van-cell-group inset>
                <van-field center clearable v-model="identifyCode" name="telcode" label="短信验证码" placeholder="请输入验证码"
                    @input="judgeFn" :rules="[{ validator, message: '请输入正确内容', pattern }]">
                    <template #button>
                        <van-button size="small" type="primary" color="linear-gradient(to right, #ff6034, #ee0a24)"
                            round @click="sendCode">
                            发送验证码</van-button>
                    </template>
                </van-field>
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" :disabled="use" id="submit" @click="compare"
                    class="nextButton">
                    下一步
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">

// 引入发送验证码校验验证码接口
import { sendCodeApi, checkCodeApi } from '@/api/registApi'
import { ref, type Ref, reactive, computed, watch, defineProps, defineEmits } from 'vue'
// 引入注册对应的Pinia仓库
import { useregisterStore } from '@/store/useregisterStore'
import { useRouter } from 'vue-router'
const router = useRouter()
// 使用pinia
const registerStore = useregisterStore()
// 定义输入框双向绑定的数据
let identifyCode = ref()
// 定义一个验证码
let Code = ref<number | undefined>()
// 定义一个判断按钮禁用状态的数据，默认是禁用
let use = ref(true)

// 点击发送验证码时调用接口
interface qq1 {
    tel: string;
}
// let tel1:string = registerStore.tel
let sendCode = () => {
    let tels: qq1 = {
        tel: registerStore.tel
    }
    sendCodeApi(tels).then((res) => {
        console.log(tels);
        
        console.log('验证码', res.data);
        Code = res.data.toString()
        console.log('code', Code);
    })
}
const pattern = /^[0-9]{5}$/
const validator = (value: string) => {
    return pattern.test(value)
}
// 输入框输入时进行正则判断
let judgeFn = () => {
    if (validator(identifyCode.value)) {
        use.value = false
    } else {
        use.value = true
    }
}
let onSubmit = () => {
    
}

// console.log('手机号',tel);

// 点击下一步时判断输入的验证码与后台返回的验证码是否一致
interface qq {
    tel: string;
    telcode: string
}
// console.log(identifyCode.value);

let compare = () => {
    let value1: qq = {
        tel: registerStore.tel,
        telcode: identifyCode.value
    }
    checkCodeApi(value1).then((res: any) => {
        console.log('验证验证码', res);
        console.log('value1', value1.telcode);

        if (res.code == '200') {
            // 验证码输入正确，跳转注册第三步,
        
            router.push('/register/step3')

        } else {
            // 输入的验证码不正确
            console.log('验证码不正确');

        }

    })
    // console.log(identifyCode.value);

}



</script>
<style scoped lang="scss">
.van-form {
    width: 90%;
    height: 500px;
    margin: 60px auto;
    position: relative;

    .van-field {
        padding: 10px 16px;
    }

    .nextButton {
        background-color: #D30707;
        border: #D30707;
        margin-top: 60px;
    }
}
</style>